<template>
<div class="service">
	<div class="service-banner">
		<c-head :nav="nav"></c-head>
	</div>
	<div class="wrap-width service-wrap">
		<div class="service-name">
			<router-link to='/service/recipe'><span @click="recipeList">食谱</span></router-link>
			<router-link to='/service/test'><span @click="testList">测评</span></router-link>
			<router-link to='/service/others'><span @click="otherList">其他</span></router-link>
		</div>
		<router-view :list="list"></router-view>
	</div>
	<foot></foot>
</div>
</template>
<script>
    import product from '@/product.js'
    import head from '@/components/head'
    import foot from '@/components/footer'
    export default {
        data(){
            return {
                nav: 1,
                list: []
            }
        },
        components: {
            cHead: head,
            foot
        },
        created() {
            let url = window.location.href
            if (url.indexOf('recipe') > 0) {
                this.list = product.recipe
            } else if (url.indexOf('test') > 0) {
                this.list = product.test
            } else {
                this.list = product.other
            }
        },
        methods: {
            recipeList() {
                this.list = product.recipe
            },
            testList() {
                this.list = product.test
            },
            otherList() {
                this.list = product.other
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
	@media screen and (min-width: 600px) and (max-width: 800px)
		.service
			.service-banner
				height 320px
			.service-name
				padding 24px 10px 18px 10px
				a
					font-size 16px
					padding 8px 16px
					margin-right 10px
					
	@media screen and (min-width: 450px) and (max-width: 600px)
		.service
			.service-banner
				height 245px
			.service-name
				padding 18px 10px 14px 10px
				a
					font-size 15px
					padding 6px 15px
					margin-right 10px
	@media screen and (max-width: 450px)
		.service
			.service-banner
				height 225px
			.service-name
				padding 16px 10px 12px 10px
				a
					font-size 14px
					padding 6px 13px
					margin-right 10px				
	.service-banner
		height 430px
		width 100%
		background-image url('../assets/img/service-banner.png')
		background-size cover
		background-position center
		background-repeat no-repeat
	.service-name
		padding 50px 0 40px 0
		a
			display inline-block
			font-size 18px
			padding 10px 30px
			color #2e2e2e
			margin-right 30px
			line-height 1
			&.router-link-active
				color #0089dc
				border 1px solid #0089dc
				border-radius 24px
	
</style>
